<!DOCTYPE html>
<!--
    Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/licenses/publicdomain/

    Tests if getComputedStyle() works on -moz-image-rect() and formats the
    output correctly.
-->
<html>
  <head>
    <title>Testcases: -moz-image-rect() [bug 113577]</title>
    <style>
      div.wrapper {
        width: 32px;
        height: 32px;
        margin: 10px;
        background-color: red;
      }
      div.wrapper div {
        width: 32px;
        height: 32px;
        background: no-repeat;
      }
    </style>
    <script>
      var curdir   = location.href.replace(/[^/]+$/, "");
      // Tests a common usage
      var test1    = "-moz-image-rect(url(green-16x16-in-blue-32x32.png), 0, 16, 16, 0)";
      var testRef1 = "-moz-image-rect(url(\"" + curdir + "green-16x16-in-blue-32x32.png\"), 0, 16, 16, 0)";
      // Tests an irregular but valid usage
      var test2    = "-moz-image-rect( 'green-16x16-in-blue-32x32.png' , 0.0% , 50.5% , 49.5% , 0.0% )";
      var testRef2 = "-moz-image-rect(url(\"" + curdir + "green-16x16-in-blue-32x32.png\"), 0%, 50.5%, 49.5%, 0%)";
      // Tests a wrong syntax (negative value)
      var test3    = "-moz-image-rect(url(green-16x16-in-blue-32x32.png), 0%, -50%, 50%, 0%)";
      var testRef3 = "none";
      // Checks if I didn't break the default url() notation.
      var test4    = "url(  green-16x16-in-blue-32x32.png  )";
      var testRef4 = "url(\"" + curdir + "green-16x16-in-blue-32x32.png\")";

      function equalComputedDOMIO(domInput, domOutputRef, targetId) {
        var targetObj = document.getElementById(targetId);
        targetObj.style.backgroundImage = domInput;
        var domOutput = getComputedStyle(targetObj, null).getPropertyValue("background-image");
        document.write(domOutput == domOutputRef ? "SUCCESS" : ("FAIL: " + domOutput));
      }
    </script>
  </head>
  <body>
    <div class="wrapper"><div id="test1"></div></div>
    <script>
      equalComputedDOMIO(test1, testRef1, "test1");
    </script>
    <div class="wrapper"><div id="test2"></div></div>
    <script>
      equalComputedDOMIO(test2, testRef2, "test2");
    </script>
    <div class="wrapper"><div id="test3"></div></div>
    <script>
      equalComputedDOMIO(test3, testRef3, "test3");
    </script>
    <div class="wrapper"><div id="test4"></div></div>
    <script>
      equalComputedDOMIO(test4, testRef4, "test4");
    </script>
  </body>
</html>
